<template>
	<view>


		<view class="flex margin-xs radius  ">
			<!-- <view class="flex-sub padding-sm radius">
				<text :class="buyfrom.sim==1 ? 'iconfont icon-jinbi text-yellow' : 'iconfont icon-jifenduihuan text-pink' " style="font-size: xx-large;"></text>
				<text class="text-xl">{{tradename[buyfrom.sim]}}</text>
			</view> -->
			<view class="    padding-sm   radius" style="width: 40%;">
				<view class="uni-h2" :class="change > 0 ? 'text-green' : 'text-red'">
					{{close}}
				</view>
				<!-- <view class="toptext" :class="change > 0 ? 'text-green' : 'text-red'">
					≈{{cnyprice}}CNY {{change > 0 ? '+' : ''}}{{change}}%
				</view> -->
				<!-- <view class="toptext">
					≈{{usdprice}}USD
				</view> -->
				<!-- <view class="toptext" :class="change > 0 ? 'text-green' : 'text-red'">
				  {{change > 0 ? '+' : ''}}{{change}}%
				</view> -->
			</view>
			<view class="  margin-top-sm  padding-sm radius " style="width: 55%;">
				<view class="flex" style="position: inherit;">
					<view class="  radius " style="width: 50%;">
						<view class="tit2 ">{{i18n.kline.high}}<text class="tit margin-left-sm">{{high}}</text></view>
						
					</view>
					<view class="   radius "  style="width: 50%;">
						<view class="tit2 ">Turnover<text class="tit margin-left-sm">{{volume}}</text></view>
						
					</view>
				</view>
				<view class="flex margin-top-sm" style="position: inherit;">
					<view class="   radius "  style="width: 50%;">
						<view class="tit2 ">{{i18n.kline.low}}<text class="tit margin-left-sm">{{low}}</text></view>
						
					</view>
					<view class="   radius "  style="width: 50%;">
						<view class="tit2 ">Volume<text class="tit margin-left-sm">{{amount}}</text></view>
						
					</view> 
				</view> 
			</view>
		</view>

		<view class="chart">
			<scroll-view scroll-x class="bg-white nav">
				<view class="flex text-center">
					<view class="cu-item flex-sub" :class="item.id==TabCur?'text-yellow':''"
						v-for="(item,index) in tabList" :key="index" @tap="tabSelect(item)">
						{{item.name}}
					</view>
				</view>
			</scroll-view>
			<!-- <view class="set-box" v-show="setPop">
				<view class="item u-flex">
					<view class="left u-flex">
						<view class="title u-flex-1">主图</view>
						<scroll-view scroll-x>
							<view>
								<text :class="zhibiao=='BOLL'?'active':''" @tap="setb('BOLL')">BOLL</text>
								<text :class="zhibiao=='5MA'?'active':''" @tap="setb('5MA')">5MA</text>
								<text :class="zhibiao=='10MA'?'active':''" @tap="setb('10MA')">10MA</text>
								<text :class="zhibiao=='20MA'?'active':''" @tap="setb('20MA')">20MA</text>
							</view>
						</scroll-view>
					</view>
					<view class="right" @tap="hideb">隐藏</view>
				</view>
				<view class="item u-flex">
					<view class="left u-flex">
						<view class="title u-flex-1">副图</view>
						<scroll-view scroll-x>
							<view>
								<text :class="zhibiao=='MACD'?'active':''" @tap="setb('MACD')">MACD</text>
								<text :class="zhibiao=='RSI'?'active':''" @tap="setb('RSI')">RSI</text>
							</view>
						</scroll-view>
					</view>
				</view>
			</view> -->
			<!-- <view id="trade-view"></view> -->
			<UpdateKLineChart ref="chart" />
		</view>

		<view class="flex uni-row tform-item margin-top-xs bg-black">
			<view class="title">{{i18n.kline.Principal}}</view>
			<view class="inin" style="width: 40%;margin-left: 3%;padding: 8px;">
				<input type="number" v-model="buyfrom.hand"></input>
				<view class="text-gray">USDT</view>
			</view>
			<view style="width: 20%;margin-left: 3%;">
				<view class="item1">{{i18n.kline.inputmoney}}</view>
				<view class="item2">{{userinfo.wall1}}</view>
			</view>
			<!-- <view style="flex: 1 1 0%;text-align: right;">
				<view class="item1 margin-right-sm">
					<image style="width: 24px;height: 24px;border: 1px dotted;" src='/static/my/nowc.png' mode=""
						@tap="navTo('/pages/user/qxorder2?index=0')"></image>
				</view>
				<view class="item1">{{i18n.order.tab1}}</view>
			</view> -->

		</view>
		<view class="flex uni-row tform-item bg-black">
			<view class="title">{{i18n.kline.time}}</view>
			<view class="grid col-4"  >
				<template v-for="(item,index) in myconfig.qx_time">
					<view class="" style="margin: 0 10px auto;">
					<button class="btn margin-right-sm timebtn" :class="radio==item?'bg-yellow':''"
						@tap="timefun(item)">{{item}}{{i18n.kline.minutes}}</button>
						</view>
				</template>
			</view>
			<!-- <view style="flex: 1 1 0%;text-align: right;">
				<view class="item1 margin-right-sm">
					<image style="width: 24px;height: 24px;border: 1px dotted;" src='/static/my/history.png' mode=""
						@tap="navTo('/pages/user/qxorder2?index=1')"></image>
				</view>
				<view class="item1">{{i18n.order.tab2}}</view>
			</view> -->

		</view>

		<view class="flex uni-row   bg-black " style="padding-top: 13px;padding-bottom: 15px;">
			<view class="bg-black" style="width: 95%;margin: 0px auto;display: flex; ">
				<button class="cu-btn bg-green dbt" @tap="gobuy('1')">{{i18n.kline.BuyUp}}</button>
				<button class="cu-btn bg-red dbt" @tap="gobuy('2')">{{i18n.kline.BuyDown}}</button>
			</view>

		</view>

		<!-- <view class="cu-list grid col-2 no-border ">
			<view class="cu-item">
				<button class="cu-btn bg-green dbt" @tap="gobuy('1')">{{i18n.kline.BuyUp}}</button>
			</view>
			<view class="cu-item">
				<button class="cu-btn bg-red dbt" @tap="gobuy('2')">{{i18n.kline.BuyDown}}</button>
			</view>

		</view> -->

		<!-- 委托 -->
		<qiOrderList :salename="salename" :buyname="buyname" ref="child"></qiOrderList>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';

	// import {
	// 	widget as TvWidget
	// } from '@/static/charting_library/charting_library.min.js';

	import {
		feed
	} from '@/kline/datafeeds/datafees.js';
	import Event from '@/kline/datafeeds/event.js'
	import socket from '@/kline/datafeeds/socket.js';
	import qiOrderList from '@/components/qiOrderList.vue'
	import UpdateKLineChart from '@/components/UpdateKLineChart'

	export default {
		components: {
			qiOrderList,
			UpdateKLineChart
		},
		data() {
			return {
				title: '',
				buyfrom: {
					price: 0,
					hand: 10, //本金
					sim: '1', //1 实盘 2 模拟
					product_id: 'BTC',
					rise_fall: '1', // 1 买涨 2 买跌
				},
				// tradename: ['1', '普通场', '包赔场'],
				widget: null,
				datafeeds: new feed(),
				symbol: null,
				interval: null,
				cacheData: {},
				lastTime: null,
				getBarTimer: null,
				isLoading: true,
				buyname: '--',
				salename: '--',
				open: '--',
				high: '--',
				low: '--',
				close: 0,
				volume: '--', //成交额
				amount: '--', //成交量
				id: 0,
				change: 0,
				TabCur: 0,
				scrollLeft: 0,
				// tabList: [

				// 	{
				// 		name: '1分钟',
				// 		id: '0',
				// 		time: '1'
				// 	},
				// 	{
				// 		name: '5分钟',
				// 		id: '1',
				// 		time: '5'
				// 	},
				// 	{
				// 		name: '30分钟',
				// 		id: '2',
				// 		time: '30'
				// 	},
				// 	{
				// 		name: '1小时',
				// 		id: '3',
				// 		time: '60'
				// 	},
				// 	{
				// 		name: '4小时',
				// 		id: '4',
				// 		time: '240'
				// 	},
				// 	{
				// 		name: '日线',
				// 		id: '5',
				// 		time: '1D'
				// 	},

				// ],
				radio: '1', //表单选择
				date: new Date().Format('h:m:s'),
				modalName: null,
				radio2: '',
				marketList: {},
				binfo: {},

				setPop: false,
				zhibiao: '',
			};
		},
		onNavigationBarButtonTap(e) {
			console.log(e.index)
			if (e.index == 0) {
				this.showModal('RadioModal')
			}
			if (e.index == 1) {
				this.buyfrom.sim = this.buyfrom.sim == 1 ? '2' : '1';

			}
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo,
				myconfig: state => state.user.myconfig
			}),
			cnyprice() {
				return Math.round(this.close * this.myconfig.rate_cny2usdt * 100) / 100;
			},
			usdprice() {
				return Math.round(this.close * this.myconfig.rate_usdt2usd * 100) / 100;
			},
			hasLogin() {
				return this.userinfo.id ? true : false
			},
			i18n() {
				return this.$t('message');
			},
			tabList() {
				return [
					// {
					// 	name: '设置',
					// 	id: '666',
					// 	time: '1D'
					// },
					{
						name: this.i18n.kline.m1,
						id: '0',
						time: '1'
					},
					{
						name: this.i18n.kline.m5,
						id: '1',
						time: '5'
					},
					{
						name: this.i18n.kline.m30,
						id: '2',
						time: '30'
					},
					{
						name: this.i18n.kline.m60,
						id: '3',
						time: '60'
					},
					{
						name: this.i18n.kline.m240,
						id: '4',
						time: '240'
					},
					{
						name: this.i18n.kline.d1,
						id: '5',
						time: '1D'
					},


				];
			},
			tradename() {
				return ['1', this.i18n.kline.room2, this.i18n.kline.room1];
			}
		},
		mounted() {
			this.marketList = uni.getStorageSync('marketList');
			this.buyfrom.hand =  this.myconfig.qx_min_real[this.radio];
			this.ini()
		},
		// onBackPress() {
		// 	console.log(1111111)
		// 	clearInterval(this.Timer);
		// },
		// onHide() {
		// 	console.log('kline-----------onHide')

		// },
		destroyed() {
			console.log('qx----destroyed')

			// clearInterval(this.Timer);
			if (this.$timer.length > 0) {
				for (let i = 0; i < this.$timer.length; i++) {
					clearInterval(this.$timer[i])
				}
			}
		},
		methods: {
			...mapActions(['getUserinfo']),
			Timer() {},
			ini() {
				if (this.$timer.length > 0) {
					for (let i = 0; i < this.$timer.length; i++) {
						clearInterval(this.$timer[i])
					}
				}
				let data = uni.getStorageSync('market');
				console.log(data)
				this.symbol = data.symbol ? data.symbol : 'btcusdt';
				this.salename = data.name ? data.name : 'BTC';
				this.buyname = data.priceUnit ? data.priceUnit : 'USDT';
				this.buyfrom.sim = '1'
				this.buyfrom.product_id = this.salename;
				this.title = this.salename.toUpperCase() + '/' + this.buyname;
				uni.setNavigationBarTitle({
					title: this.title
				});
				console.log('kline-----------mounted')
				this.$refs.chart.kdata(this.symbol, 1)
				this.getUserinfo();
				this.$refs.child.loadTabbars();
				setTimeout(() => {
					this.$refs.child.loadNewsList('refresh'); //刷新委托列表 
					this.nowtime();
					
				}, 300)
				// this.$timer.push(setInterval((e) => {
				// 	this.date = new Date().Format('h:m:s');

				// }, 1000))
			},
			timefun(item){
				this.buyfrom.hand = this.myconfig.qx_min_real[item];
				this.radio=item;
			},
			tabSelect(item) {
				if (item.id == '666') {
					//指标
					this.setPop = true
				} else {
					this.TabCur = item.id;
					this.scrollLeft = (item.id - 1) * 60
					this.$refs.chart.kdata(this.symbol, item.time)
					this.realtime()
				}

			},
			hideb() {
				this.setPop = false
			},
			RadioChange(e) {
				this.radio = e.detail.value
			},
			showModal(name) {
				this.modalName = name
			},
			hideModal(e) {
				this.modalName = null
			},
			RadioChange2(e) {

				// console.log(this.marketList[e.detail.value])
				let info = this.marketList[e.detail.value];
				this.symbol = info.symbol;
				this.salename = info.name;
				this.buyname = info.priceUnit;

				this.title = info.name.toUpperCase() + '/' + info.priceUnit + '▼';
				uni.setNavigationBarTitle({
					title: this.title
				});
				this.radio2 = e.detail.value;
				this.buyfrom.product_id = info.name;
				// this.widget.chart().setSymbol(this.symbol)
				this.hideModal();
				setTimeout(() => {
					// this.widget.chart().resetData()
					this.nowtime();
				}, 1000)

			},
			getbinfo() {
				this.$http.post('btc.binfo').then(res => {
					console.log(res)
					if (res.code == 1) {
						this.binfo = res.data
						this.high = this.binfo[this.salename.toLowerCase()].high;
						this.open = this.binfo[this.salename.toLowerCase()].open;
						// this.low = this.binfo[this.salename].low;
						// this.close = data.close;
						this.volume = Math.round(this.binfo[this.salename.toLowerCase()].volume * 100) / 100;
						this.amount = Math.round(this.volume / this.close * 100) / 100;
					}
				})
			},
			nowtime() {

				// Event.off('realTime')
				// 拿到实时数据 在这里画
				Event.on('realTime', data => {
					console.log('realTime-------------------------')
					console.log(data)
					this.high = data.high;
					this.open = data.open;
					this.low = data.low;
					this.close = data.close;
					this.volume = Math.round(data.vol * 100) / 100;
					this.amount = Math.round(data.amount * 100) / 100;
					this.change = Math.round((data.close - data.open) / data.open * 10000) / 100;

					this.id = data.id;

				})
			},
			ttt() {
				return 1;
				let b = this.myconfig.q_b[this.salename] ? this.myconfig.q_b[this.salename] : 0.0001;
				let x = Math.cos(Math.PI * Math.round(Math.random()));
				let nn = Math.round((this.close + x * Math.random() * b) * 10000) / 10000;

				let newdata = {
					amount: this.amount,
					close: nn,
					count: 80,
					high: this.high,
					id: this.id,
					low: this.low,
					open: this.open,
					vol: this.volume
				}
				// console.log(this.salename+newdata.close)

				Event.emit('realTime', newdata)
			},
			realtime() {
				setTimeout(() => {
					this.nowtime();
				}, 1000)

			},
			 
			navTo(url) {
				if (!this.userinfo.id) {
					url = '/pages/public/login';
				}
				uni.navigateTo({
					url
				})
			},
			gobuy(type) {
				if (!this.hasLogin) {
					this.$api.msg(this.i18n.popup.loginfirst)
					return false;
				}
				if (this.buyfrom.hand == 0) {
					this.$api.msg(this.i18n.kline.inputmoney)
					return false;
				}
				if (!this.close) {
					this.$api.msg(this.i18n.popup.slow)
					return false;
				}
				this.buyfrom.rise_fall = type;
				this.buyfrom.time = this.radio;
				this.buyfrom.price = this.close;
				// if (this.buyfrom.num * this.buyfrom.price < this.rule.trade_min) {
				// 	this.$api.msg('最小交易金额为' + this.rule.trade_min)
				// 	return false;
				// }

				uni.showModal({
					title: this.i18n.popup.tips,
					content: this.i18n.popup.confirm2,
					cancelText: this.i18n.popup.cancel,
					confirmText: this.i18n.popup.confirm,
					confirmColor: '#000000',
					success: (e) => {
						if (e.confirm) {
							// this.$http.post('btc.binfo', this.buyfrom).then(info => {
							// this.buyfrom.price = info.data[this.salename].price;
							this.$http.post('Qi.submit', this.buyfrom).then(res => {
								console.log(res)
								if (res.msg) {
									this.$api.msg(res.msg)
								}
								this.getUserinfo();
								this.$refs.child.loadNewsList('refresh'); //刷新委托列表
								this.buyfrom.hand = '';
							})
							// })
						}
					}
				});

			},
			BackPage() {
				socket.close();
				if (this.$timer.length > 0) {
					for (let i = 0; i < this.$timer.length; i++) {
						clearInterval(this.$timer[i])
					}
				}
				// uni.navigateBack({
				// 	delta: 1
				// });
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			chose() {
				this.buyfrom.sim = this.buyfrom.sim == 1 ? '2' : '1';
			}
		}
	};
</script>

<style lang="scss">
	#trade-view {
		width: 100%;
		height: 30vh;
	}

	iframe {
		width: 100%;
		height: 100% !important;
	}

	.pane-legend-line.pane-legend-wrap.main.expand-line {
		padding-right: 5px;
	}

	.row {
		display: inline;
	}


	.dibu {
		padding: 10px 5px;
		bottom: 0px;
		position: absolute;
		width: 100%;
	}

	.dbt {
		width: 90%;
		margin: 0px 6px auto;
		height: 43px;

	}

	.inin {
		display: flex;
		-webkit-box-align: center;
		align-items: center;
		margin-bottom: 0px;
		width: 148px;
		height: 32px;
		background: #757575;
		border-radius: 4px;
	}

	.toptext {
		font-size: 10px;
	}

	.tit {
		color: #FFFFFF;
		font-size: 10px;
	}

	.tit2 {
		color: #AEAEAE;
		font-size: 10px;
	}

	.title {
		/* height: 20px; */
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 22px;
		color: #FFFFFF;
		opacity: 1;
		word-break: keep-all;

	}



	.item1 {
		font-size: 10px;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 16px;
		color: #AEAEAE;
		opacity: 1;
	}

	.item2 {
		height: 14px;
		font-size: 10px;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 16px;
		color: #FFFFFF;
		opacity: 1;
	}

	.tform-item {
		padding: 0.5px 16px;
		align-items: center;
		min-height: 55px;
	}

	.timebtn {
		    margin-top: 10px;
		// width: 66px;
		height: 30px;
		opacity: 1;
		line-height: 30px;
		font-size: 12px;
		font-family: PingFang SC;
		font-weight: bold;
	}

	.set-box {
		position: absolute;
		width: 100%;
		background-color: #000;
		font-size: 15px;

		.item {
			height: 100rpx;
			line-height: 48rpx;
			font-size: 32rpx;
			color: rgba($color: #fff, $alpha: 0.5);
			/* 根据实际情况修改 */
			justify-content: space-between;

			text {
				padding: 0 20rpx;
			}

			.title {
				text-align: center;
				display: block;
				border-right: 1rpx solid #f1f1f1;
				min-width: 120rpx;
			}

			scroll-view {
				width: 500rpx;
				white-space: nowrap;

				view {
					display: inline-block;
				}

				.active {
					color: #fff;
				}
			}


			.right {
				padding: 10rpx 20rpx;
			}
		}
	}
</style>
